<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-20 14:20:21
 * @Description: 
-->
<template>
  <div>
    <div class="linebreak"></div>
    <div class="article" v-for="(item, index) in categorizedData" :key="index">
      <ArticleTitle :title="item.categoryName" class="list" data-aos="fade-in"></ArticleTitle>
      <div class="linebreak"></div>
      <div class="list fix__col-1-3">
        <div v-for="(item, index) in item.list" :key="index" class="list__col-1-3" data-aos="fade-up"
          :data-aos-delay="`${index % 3 * 100}`">
          <nuxt-link :to="{
            name: 'project-detail',
            query: { id: item.id }
          }" class="link link-details hoverAni">
            <div class="thumb">
              <div class="thumb__inner">

                <img :src="$picHander(item.pic, 'zoom_small')" alt="" class="image image--loaded image--full-height" />
              </div>
            </div>
            <div class="half-linebreak"></div>
            <div class="link-textmargin">
              項目名稱：{{ item.name }}
              <br>
              項目地點：{{ item.addr }}
            </div>
            <div class="link-arrow arrow-hitbox">
              <svg class="link-arrow__right" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M11.9498 24L0 12.3515L0.903766 11.4477L11.3473 21.59V0H12.6527V21.59L23.0962 11.4477L24 12.3515L11.9498 24Z"
                  fill="black"></path>
              </svg>
            </div>
          </nuxt-link>
          <div class="linebreak"></div>
        </div>
      </div>
      <div class="linebreak"></div>
    </div>
    <div class="linebreak"></div>
    <div class="flex flex-row justify-center">
      <nuxt-link to="/contact">
        <HoverButtons @click="showForm = true" btnText="Contact Us" />
      </nuxt-link>
    </div>
    <div class="dbl-linebreak"></div>
  </div>
</template>

<script setup>
const cateList = ref([]);
const listData = ref({
  list: [],
  pages: 1,
  currentPage: 1,
  perPage: 3,
  category: "",
});
const categorizedData = ref([]);
const getProjectsCategorys = async () => {
  // 获取可以用分类列表
  const { data } = await useFetch("/api/product-categories", {
    baseURL: "/dev-api",
    params: {
      status: 1
    }
  });
  cateList.value = data.value.data.filter(item => item.name.indexOf('产品') < 0);
  // 获取全部项目列表
  getProjects()
};
const getProjects = async () => {
  const { data } = await useFetch("/api/products", {
    baseURL: "/dev-api",
    params: {
      status: 1
    }
  });
  listData.value.list = data.value.data;
  // 根据分类分组
  categorizedData.value = cateList.value.map(category => {
    return {
      categoryName: category.name,
      categoryId: category.id,
      list: listData.value.list.filter(product => product.category === category.id)
    };
  });
}
getProjectsCategorys();
const { $picHander } = useNuxtApp()
</script>